<template>
    <div class="container">
        <miao-header>
            <span slot="header">我的订单</span>
        </miao-header>
        <div class="warp"></div>
          <ul class="miao-indent">
            <router-link
              v-for="(item, key) in skipIndent"
              :class="{active:key === index}"
              :to="item.page"
              :key = 'key'
              @click.native="labelPage(key)"
              tag="li">
              <i :class="item.icon"></i>
              {{item.text}}
            </router-link>
          </ul>
        <router-view></router-view>
        <miao-footer :highlight="test"></miao-footer>
    </div>
</template>

<script>
    export default {
        name: "order",
        data(){
            return{
                skipIndent:[
                    {
                        text:"全部",
                        icon:'iconfont icon-icon128',
                        page:{name:'orderAll'}
                    },
                    {
                        text:"待付款",
                        icon:'iconfont icon-daifukuan',
                        page:{name:'obligation'}
                    },
                    {
                        text:"待发货",
                        icon:'iconfont icon-daishouhuo1',
                        page:{name:'pending'}
                    },
                    {
                        text:"待收货",
                        icon:'iconfont icon-daishouhuo',
                        page:{name:'waitForReceiving'}
                    },
                ],
                index:0,
                test:''
            }
        },
        methods:{
            labelPage(key){
                this.index = key;
            }
        },
        created(){
            this.test = this.$route.name;
        },
        mounted(){
            //下页面渲染完成时执行

        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
    }
    .warp{
        height: 100px;
    }
    .miao-indent{
        width: 100vw;
        position: relative;
        z-index: 99;
        box-sizing: border-box;
        overflow: hidden;
        list-style: none;
        font-size: 0;
        background: white;
    }
    .miao-indent>li{
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        width: 15%;
        margin: 0 5%;
        height: 140px;
        font-size: 32px;
        text-align: center;
      color: #888888;

    }
    .miao-indent>li>i{
      margin-top: 30px;
      display: block;
      font-weight: bold;
      font-size: 40px;
    }
    .miao-indent>.active{
      color:#74d660;
      border-bottom:4px solid #74d660;
      font-family: 华文细黑;
      font-weight: bold;
    }
</style>
